/**
 * User: yangmanyu
 * Date: 2019/9/25
 * Time: 13:32
 *
 */

import React, {Component} from 'react'
import Hobby from './Hobby';
import HobbyNoState from './Hobby_NoState'

class ReactLife extends Component {

    constructor(props) {
        super(props);
        this.handleTest = this.handleTest.bind(this);
        this.state = {
            like: 0,
            hobby: ['sleeping', 'reading']
        }
    }

    componentDidMount() {
        //组件挂载到DOM后调用，且只会被调用一次
        console.log(`componentDidMount`);
    }


    componentWillUnmount() {
        console.log('componentWillUnmount')
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        //应该使用这个方法，否则无论state是否有变化都将会导致组件重新渲染
        console.log(`nextState.like = ${nextState.like},state.like = ${this.state.like}`)
        // if (nextState.like === this.state.like){
        //     return false;
        // }
        // return true;
        return true;
    }

    render() {
        //根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render） ,
        // return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。
        // render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。
        console.log('render');
        return (
            <div>
                <button onClick={this.handleTest}>
                    {this.state.like}
                </button>
                <ul>
                    {/*{this.state.hobby.map((item, index) => <Hobby key={index} hobby={item}/>)}*/}
                    {this.state.hobby.map((item,index) => <HobbyNoState hobby = {item}/>)}
                </ul>

            </div>
        );
    }

    handleTest() {
        let liked = this.state.like;
        liked++;
        this.setState(() => ({
            like: liked
        }));
    }
}

export default ReactLife;